<template>
  <div class="collapse">
    <slot></slot>
  </div>
</template>


<script>
import Vue from 'vue'
export default {
  name: "aslanCollapse",
  data() {
    return {
      eventBus: new Vue
    }
  },
  props: {
    single: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Array,
    }
  },
  provide() {

    return {
      eventBus: this.eventBus
    }

  },
  mounted() {
    this.eventBus.$emit('update:selected', this.selected)
    this.eventBus.$on('update:addSelected', (name) => {
      let selectedCopy = JSON.parse(JSON.stringify(this.selected))
      if (this.single) {
        selectedCopy = [name]
      } else {
        selectedCopy.push(name)
      }
      this.eventBus.$emit('update:selected', selectedCopy)
      this.$emit('update:selected', selectedCopy)
    })
    this.eventBus.$on('update:removeSelected', (name) => {
      let selectedCopy = JSON.parse(JSON.stringify(this.selected.filter(item => item !== name)))

      this.eventBus.$emit('update:selected', selectedCopy)
      this.$emit('update:selected', selectedCopy)
    })

  }
};
</script>
<style lang="scss" scoped>
$grey: grey;
.collapse {
  border: 1px solid $grey;
  border-radius: 4px;
}
</style>

